import platform = require('../../../common/baseCommon');
import appClient = require('../../appClient');
import platformControls = require('../../controls');
import mainForm = require('../navbarMainForm');

/**
 * 模块名称
 */
const moduleName = "platform.client";

/**
 * 顶部导航栏主视图
 */
@platform.addon("顶部导航栏主视图", "顶部导航栏主视图,用于拥有顶部导航栏网页布局的主视图", moduleName)
@appClient.template("platform/client/mainForm/navbarTop/navbarTopMainForm.html", "platform/client/mainForm/navbarTop/navbarTopMainForm.css")
export class navbarTopMainForm extends mainForm.navbarMainForm {

    /**
     * 网页标题
     */
    title?: string;

    /**
     * 标题图标文件路径
     */
    iconPath?: string;

    /**
     * 导航信息
     */
    navPages?: platformControls.dropdownTabPage[];

    /**
     * 用户名
     */
    username?: string;

    /**
     * 内容是否占满
     */
    isContentFluid?: boolean;

    /**
     * 漂浮工具条
     */
    $floatTools?: JQuery = undefined;

    /**
     * 工具条
     */
    $tools?: JQuery = undefined;

    /**
     * 导航栏标题
     */
    $brandTitle?: JQuery = undefined;

    /**
     * 标题图标控件
     */
    $titleIcon?: JQuery = undefined;

    /**
     * 用户名显示控件
     */
    $username?: JQuery = undefined;

    /**
     * 主菜单对象
     */
    $mainMenu?: JQuery = undefined;

    /**
     * 标题控件（包含图标和文字）
     */
    $navbarBrand?: JQuery = undefined;

    $contentContainer?: JQuery = undefined;

    /**
      * 更改标签页
      * @param page 标签页
      */
    changePage?(page: platformControls.tabPage): void {
        // 标签页存在视图栈，即关联视图作为首页
        if (page.viewStack) {
            this.currentTabPage = page;
            this.currentViewStack = page.viewStack;
            let view: appClient.baseView;
            //视图栈不为空，直接打开栈顶视图
            if (this.currentViewStack.length() > 0) {
                view = this.currentViewStack.top();
                this.openView(view);
            } else {
                view = platform.getObject(page.view);
                if (page.title)
                    view.caption = page.title;
                this.navigate(view);
            }
        } else {
            // 标签页不存在视图栈，则直接导航到关联视图
            let view = platform.getObject(page.view);
            if (page.title)
                view.caption = page.title;
            this.navigate(view);
        }
    }

    /**
     * 打开视图
     * @param view 视图
     */
    protected openView?(view: appClient.baseView): void {
        this.currentView = view;

        this.$title.html(view.caption);

        this.$content.children().hide();
        if (view.element) {
            $(view.element).show();
        } else {
            view.appendTo(this.$content[0]);
        }
        if (view.onShowed)
            view.onShowed();
    }

    /**
     * 绑定事件
     */
    onAfterBind?() {
        this.$contentContainer.removeClass("container");
        this.$contentContainer.removeClass("container-fluid");
        if (this.isContentFluid || this.isContentFluid == undefined) {
            this.$contentContainer.addClass("container-fluid");
        } else {
            this.$contentContainer.addClass("container");
        }
        this.$brandTitle.html(this.title);
        this.$username.html(this.username);
        if (this.iconPath) {
            this.$titleIcon.attr("src", this.iconPath);
            this.$titleIcon.show();
            this.$navbarBrand.addClass("brandTitle");
        } else {
            this.$titleIcon.hide();
            this.$navbarBrand.removeClass("brandTitle");
        }
        // 渲染导航页面
        if (this.navPages) {
            for (let nav of this.navPages) {
                nav.onChangeView = (page: platformControls.tabPage) => {
                    this.changePage(page);
                };
                nav.appendTo(this.$mainMenu);
                let separate = $(`<li class="separate"><a>|</a></li>`);
                separate.appendTo(this.$mainMenu);
            }
        }

        // 加载首页
        if (this.navPages && this.navPages[0]) {
            if (this.navPages[0].navPages && this.navPages[0].navPages.length && this.navPages[0].navPages.length > 0) {
                this.changePage(this.navPages[0].navPages[0]);
            } else if (this.navPages[0].view) {
                this.changePage(this.navPages[0]);
            }
        }
    }
}